<template>
  <el-dialog
    v-model="visible"
    title="本地上传"
    width="800"
    draggable
    @close="close"
    :z-index="2000"
  >
    <div>
      <div class="flex justify-between mb-2" v-if="!props.type">
        <div class="flex items-center">
          <div class="text-base mr-2">绩效标签：</div>
          <div class="">
            <template v-if="images_img_tag_list.length">
              <el-tag
                style="margin-right: 4px"
                v-for="(i, j) in images_img_tag_list"
                :key="j"
                closable
                type="success"
                @close="handleTagDelete(j)"
              >
                {{ i.images_tag?.tag_name }}
                <span class="tabs_item" v-if="i.tag_count > 1">x {{ i.tag_count }}</span>
              </el-tag>
            </template>
          </div>
          <div class="ml-4">
            <el-button type="primary" link @click="checkedTag">编辑绩效标签</el-button>
          </div>
        </div>
      </div>
      <div class="mb-4">
        <div class="text-base">图片类型</div>
        <el-radio-group v-model="image_for">
          <el-radio
            v-for="item in options['gallery.GoodsSkuGalleryContents']?.[0].imageForText"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </div>
      <div class="text-sm text-[#999999] mb-2">
        注意:单张图片大小>=5M,推送赛盒将被拦截,请注意图片大小!!!!
      </div>
      <VUpload :limit="999" drag :progress="true" :multiple="true" @success="success">
        <div class="el-upload__text">拖拽文件到这里或 <em>点击上传</em></div>
      </VUpload>
      <div class="border mt-2 flex flex-wrap pt-4 pl-4 upload-box" v-if="fileList.length">
        <div class="w-28 mr-4 mb-4" v-for="(item, index) in fileList" :key="item.url">
          <div class="bg-gray-300 mb-2 relative w-28 h-28">
            <svg-icon
              icon-class="state_fail_cover"
              class="absolute -right-1.5 -top-1.5 text-base text-white z-10"
              @click="handleRemove(index)"
            />
            <VImage :src="item.url" :width="112" :height="112"></VImage>
          </div>
          <div class="line1 text-xs">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">保 存</el-button>
      </div>
    </template>
  </el-dialog>
  <batchImagesTag ref="batchImagesTagRef" @checked="checkedList"></batchImagesTag>
</template>
<script setup name="NativeUpload">
import VImage from "@/components/Image/index.vue";
import VUpload from "@/components/VUpload/index.vue";
import SelectPerformanceTag from "@/components/SelectPerformanceTag";
import batchImagesTag from "@/components/batchImagesTag/index";

import { ElMessage } from "element-plus";
import { reactive, toRefs } from "vue";

let options = reactive(inject("options"));

const props = defineProps({
  customTag: {
    type: String,
    default: () => "",
  },
  type: {
    type: String,
    default: () => "",
  },
  key: {
    type: String,
    default: () => "images_img_tag_list",
  },
});

const { key } = toRefs(props);

const emits = defineEmits(["uploadFile"]);
const imageType = ref(0);
const loading = ref(false);
const visible = ref(null);
const images_tag_id = ref([]);

const data = reactive({
  images_img_tag_list: [],
  image_for: "",
});

const { images_img_tag_list, image_for } = toRefs(data);

const open = (type) => {
  fileList.value = [];
  images_img_tag_list.value = [];
  visible.value = true;
  imageType.value = type;
};
const fileList = ref([]);
const handleRemove = (index) => {
  fileList.value.splice(index, 1);
};

const close = () => {
  visible.value = false;
};

const success = (obj) => {
  fileList.value.push({
    name: obj.filename,
    url: obj["data-show-file"],
    image_type: imageType.value,
    tag: props.customTag,
    images_img_tag: [],
  });
};
const save = () => {
  if (!fileList.value.length) return ElMessage.error(`请上传图片`);
  const mapfileList = fileList.value.map((item) => {
    item.image_for = image_for.value;
    return item;
  });

  if (images_img_tag_list.value.length) {
    mapfileList.forEach((i) => {
      i.images_img_tag_list = images_img_tag_list.value;
    });

    emits("uploadFile", mapfileList, imageType.value);
  } else {
    emits("uploadFile", mapfileList, imageType.value);
  }
  close();
};
defineExpose({ open });

const batchImagesTagRef = ref();
const checkedTag = () => {
  batchImagesTagRef.value.open("batch", images_img_tag_list.value);
};

const checkedList = (list) => {
  images_img_tag_list.value = list.map((i) => {
    return {
      images_tag_id: i.images_tag_id,
      tag_count: i.tag_count,
      images_tag: {
        tag_name: i.tag_name,
      },
    };
  });
  console.log(list);
  console.log(images_img_tag_list.value);

  // form.value.images_assignment_sku[firstIndex.value].images_assignment_list[secondIndex.value].images_img_tag = list
  // filterList(PictureList)
};

const handleTagDelete = (index) => {
  images_img_tag_list.value.splice(index, 1);
};
</script>
<style lang="scss" scoped>
.typeList {
  display: flex;
  justify-content: space-between;
}

.imageClass {
  border-radius: 4px;
  border: 1px solid #e6e7e9;
  flex: auto;
  margin: 16px 8px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.active {
  background: rgba(51, 102, 241, 0.06);
  border: 1px solid #3366f1;
}

.activeIcon {
  background: #3366f1;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon {
    position: absolute;
    color: #fff;
    display: inline-block;
    margin: auto;
  }
}

.upload-demo {
  :deep(.el-upload--picture) {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.el-upload-list) {
    // display: none;
  }
}

.upload-box {
  min-height: 160px;
}
</style>
